/**
 * 插件形式封装全局指令
 */
// 导入监控元素是否进入可视区函数
import { useIntersectionObserver } from '@vueuse/core'
// 导入加载失败显示的默认图片
import defImg from '@/assets/images/200.png'
// 图片加载动画
import loadImg from '@/assets/images/load.gif'

export default {
  install (app) {
    // console.log('实例对象', app)
    // vue3 挂载全局属性 (所有组件都可以获取load) | vue2 Vue.prototype.name = 'axios'
    app.config.globalProperties.load = loadImg
    // 注册全局指令
    // 指令作用: 操作DOM
    app.directive('ilazy', {
      // 绑定元素的父组件被挂载时调用
      /**
       *
       * @param {*} el  el就是使用 ilazy指令的元素
       * @param {*} binding  获取指令上绑定的值
       */
      mounted (el, binding) {
        // console.log('元素挂载了', el, binding.value)
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          // 1- 图片进入可视区 -> 给图片赋值 (src) => 下载图片并渲染显示 -> 关闭监控
          if (isIntersecting) {
            setTimeout(() => {
              el.src = binding.value
            }, 1000)
            // 2- 图片加载失败处理 -> 显示一个默认图片
            el.onerror = () => {
              el.src = defImg
            }
            // 关闭监控
            stop()
          }
        })
      }
    })
  }
}
